<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Radar Chart</title>
        <script src="../../build/deps.js"></script>
        <!-- chord -->
        <script src="../../deps/seajs/sea.js"></script>
        <script>
            seajs.config({
                alias: {
                    'DataV': '/lib/datav.js',
                    'Radar': '/lib/charts/radar.js'
                }
            });
        </script>
        <style type="text/css">
            #chart {
                border-top: 1px dashed #F00;
                border-bottom: 1px dashed #F00;
                padding-left: 20px;
            }
            .textArea {
                border: 2px solid black;
                color: black;
                font-family: monospace;
                height: 3in;
                overflow: auto;
                padding: 0.5em;
                width: 750px;
            }
        </style>
    </head>
    
    <body>
        <div id="chart"></div>
        <script type="text/javascript">
            seajs.use(["Radar", "DataV"], function (Radar, DataV) {
                // DataV.changeTheme("datav");
                var radar = new Radar("chart", {
                    width: 800,
                    height: 600,
                    legend: true
                });
                DataV.csv("cars2.csv", function (source) {
                    radar.setSource(source,{
                        name: 0,
                        dim: 1,
                        value: 2
                    });
                    radar.render();
                });
            });
        </script>
        </script>
    </body>

</html>